<script setup>
//import {excelApi} from "../../../api/axios";
//import {MINIO_HOST} from "../../../const";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {dateFormat, myRemove, myPage, myRemoveBatch, genderFormat, studentStatusFormat, getResponseData} from "../../../util";
import {pageApi, removeApi, removeBatchApi} from "../../../api/student.js";
import {listApi as listClazzApi} from "../../../api/clazz.js";
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import MyList from "../../../components/MyList.vue";

/* ==================== 分页查询 ==================== */
// 表格数据 + 分页数据
let records = ref();
let pageInfo = shallowReactive({'pageNum': 1, 'pageSize': 5, 'fn': page});
// 分页查询条件字段：学员名称
let studentName = shallowRef();
let clazzId = shallowRef();

// 分页函数
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {

  // 分页基础配置
  let config = {
    'api': pageApi,
    'params': {'pageNum': pageNum, 'pageSize': pageSize},
    'records': records,
    'pageInfo': pageInfo
  }

  // 附加为分页条件
  if (studentName.value) config['params']['name'] = studentName.value;
  if (clazzId.value) config['params']['clazzId'] = clazzId.value;
  // 发送分页请求
  await myPage(config);
}

/* ==================== 查看详情 ==================== */
// 学员详情抽屉 + 学员详情列表数据
let detailDrawer = shallowRef();
let detailItems = ref();

/* ==================== 查询全部的部门记录 ==================== */
let clazzItems = [{'label': '全部', 'value': 0}];

async function listClazz() {
  let res = await listClazzApi();
  let classes = getResponseData(res);
  Object.values(classes).forEach(clazz => {
    clazzItems.push({'label': clazz['name'], 'value': clazz['id']});
  });
}

function detail(record) {
  detailItems.value = [
    {'label': '学员姓名', 'value': record['name']},
    {'label': '学号', 'value': record['sno']},
    {'label': '班级', 'value': record['clazzName']},
    {'label': '学校', 'value': record['school']},
    {'label': '院系', 'value': record['collage']},
    {'label': '专业', 'value': record['major']},
    {'label': '年级', 'value': record['grade']},
    {'label': '性别', 'value': record['gender'], format: genderFormat, type: 'tag'},
    {'label': '电话', 'value': record['phone']},
    {'label': '微信', 'value': record['wechat']},
    {'label': 'QQ', 'value': record['qq']},
    {'label': '销售', 'value': record['salesmanName']},
    {'label': '身份证号', 'value': record['idCard']},
    {'label': '状态', 'value': record['status'], format: studentStatusFormat, type: 'tag'},
    {'label': '创建时间', 'value': record['created'], 'format': dateFormat},
    {'label': '修改时间', 'value': record['updated'], 'format': dateFormat},
    {'label': '学员描述', 'value': record['info'], 'type': 'card'},
  ];
  detailDrawer.value = true;
}

/* ==================== 单条添加 ==================== */
function insert() {
  router.push('/StudentInsert');
}

/* ==================== 单条修改 ==================== */
function update(row) {
  sessionStorage.setItem('student', JSON.stringify(row));
  router.push('/StudentUpdate');
}

/* ==================== 单条删除 ==================== */
function remove(row) {
  myRemove({'id': row['id'], 'api': removeApi, 'fn': page});
}

/* ==================== 批量删除 ==================== */
// 批量删除主键数组
let ids = [];

function selectionChange(rows) {
  ids = rows.map(e => e['id']);
}

function removeBatch() {
  myRemoveBatch({'ids': ids, 'api': removeBatchApi, 'fn': page})
}

/* ==================== 按学员名称模糊查询 ==================== */
function pageLikeName(val) {

  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || studentName.value) {
    studentName.value = val;
    page();
  }
}

/* ==================== 打印报表 ==================== */
function excel() {
  // excelApi('/student/excel', '学员统计表');
}

/* ==================== 按所在班级查询 ==================== */
function pageByClazzId(val) {
  // console.log("hello")
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || clazzId.value) {
    clazzId.value = val;
    page();
  }
}

/* ==================== 加载函数 ==================== */
onMounted(() => {
  page()
  listClazz()
});

</script>

<template>

<my-nav :items="[
  {'icon': 'Avatar', 'label': '课程管理'},
  {'icon': 'User', 'label': '学员列表'},
]"/>

<my-head :items="[
  {'type': 'ipt', 'span': 5, 'placeholder': '按学员名称模糊搜索', 'fn': pageLikeName},
  {'type': 'opt', 'span': 5, 'placeholder': '按所在班级搜索', 'fn': pageByClazzId, 'optItems': clazzItems},
  {'type': 'insertBtn', 'offset': 11, 'fn': insert},
  {'type': 'deleteBtn', 'fn': removeBatch},
  {'type': 'excelBtn', 'fn': excel},
]"/>

<!--  <my-head :items="[
  {'type': 'ipt', 'span': 5, 'placeholder': '按员工姓名模糊搜索', 'fn': pageLikeName},
  {'type': 'ipt', 'span': 5, 'placeholder': '按电话号码精准搜索', 'fn': pageByPhone},
  {'type': 'opt', 'span': 5, 'placeholder': '按所在部门精准搜索', 'fn': pageByDeptId, 'optItems': deptItems},
  {'type': 'insertBtn', 'offset': 6, 'fn': insert},
  {'type': 'deleteBtn', 'fn': removeBatch},
  {'type': 'excelBtn', 'fn': excel},
]"/>-->

<my-table v-if="records" :records="records" :columns="[
  {'column': ['学员信息', '姓名'], 'property': 'name', 'width': 80},
  {'column': ['学员信息', '学校'], 'property': 'school', 'width': 120},
  {'column': ['学员信息', '院系'], 'property': 'collage', 'width': 120},
  {'column': ['学员信息', '专业'], 'property': 'major', 'width': 120},
  {'column': ['学员信息', '年级'], 'property': 'grade', 'width': 80},
  {'column': ['学员信息', '性别'], 'property': 'gender', 'width': 80, format:genderFormat, type:'tag', 'tagTypeFn': status=>{
    if (status === 0 || status === '0') return 'warning';
    if (status === 1 || status === '1') return 'success';
    return 'default';
  }},
  {'column': ['学员信息', '电话'], 'property': 'phone', 'width': 100},
  {'column': ['学员信息', '销售'], 'property': 'salesmanName', 'width': 80},
  {'column': ['学员信息', '班级'], 'property': 'clazzName', 'width': 80},
  {'column': ['学员信息', '状态'], 'property': 'status', 'width': 80, format:studentStatusFormat, type: 'tag', 'tagTypeFn': status=>{
    if (status === 1 || status === '1') return 'primary';
    if (status === 2 || status === '2') return 'success';
    if (status === 3 || status === '3') return 'info';
    if (status === 4 || status === '4') return 'warning';
    if (status === 5 || status === '5') return 'danger';
    return 'default';
  }},
  {'column': ['学员信息', '备注'], 'property': 'info', 'width': 120, type: 'card'},
]" :buttons="[
  {'type': 'info', 'fn': detail},
  {'type': 'update', 'fn': update},
  {'type': 'delete', 'fn': remove}
]" :selection-change="selectionChange"/>

<my-pager v-if="records" :page-info="pageInfo"/>

<el-drawer v-model="detailDrawer" size="30%">
  <my-list title="记录详情" :items="detailItems"/>
</el-drawer>

</template>

<style scoped lang="scss">

</style>